<template>
  <div class="app">
    <h2>当前计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="name = 'ls'">修改name</button>
  </div>
</template>

<script>
import { ref, watch, watchEffect } from 'vue'
export default {
  setup() {
    const counter = ref(0)
    const name = ref('zs')
    const increment = () => {
      counter.value++
    }
    const decrement = () => {
      counter.value--
    }
    // 传入的函数会立即自动执行一次
    // 在执行的过程中, 会自动的收集依赖(依赖那些响应式的数据)
    const stopWatch = watchEffect(() => {
      console.log('-------', counter.value, name.value)

      if (counter.value > 10) {
        stopWatch()
      }
    })

    return {
      counter,
      name,
      increment,
      decrement,
    }
  },
}
</script>

<style scoped></style>
